Вспомогательные методы асинхронных генераторов JavaScript: освоение создания потоков и управления ими

Асинхронное программирование в JavaScript значительно эволюционировало за последние годы. С появлением асинхронных генераторов и асинхронных итераторов разработчики получили мощные инструменты для работы с потоками асинхронных данных. Теперь вспомогательные методы асинхронных генераторов JavaScript еще больше расширяют эти возможности, предоставляя более простой и выразительный способ создания, преобразования и управления потоками асинхронных данных. В этом руководстве мы рассмотрим основы вспомогательных методов асинхронных генераторов, углубимся в их функциональность и продемонстрируем их практическое применение на наглядных примерах.

Понимание асинхронных генераторов и итераторов

Прежде чем погружаться во вспомогательные методы асинхронных генераторов, крайне важно понять лежащие в их основе концепции асинхронных генераторов и асинхронных итераторов.

Асинхронные генераторы

Асинхронный генератор — это функция, которую можно приостанавливать и возобновлять, асинхронно возвращая значения. Он позволяет генерировать последовательность значений с течением времени, не блокируя основной поток. Асинхронные генераторы определяются с помощью синтаксиса async function*.

Пример:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simulate asynchronous operation
    yield i;
  }
}

// Usage
const sequence = generateSequence(1, 5);

Асинхронные итераторы

Асинхронный итератор — это объект, предоставляющий метод next(), который возвращает промис, разрешающийся в объект, содержащий следующее значение в последовательности, и свойство done, указывающее, исчерпана ли последовательность. Асинхронные итераторы используются с помощью циклов for await...of.

Пример:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Представляем вспомогательные методы асинхронных генераторов

Вспомогательные методы асинхронных генераторов — это набор методов, расширяющих функциональность прототипов асинхронных генераторов. Они предоставляют удобные способы манипулирования потоками асинхронных данных, делая код более читаемым и поддерживаемым. Эти методы работают лениво, то есть обрабатывают данные только тогда, когда это необходимо, что может повысить производительность.

Обычно доступны следующие вспомогательные методы асинхронных генераторов (в зависимости от среды JavaScript и полифиллов):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

Подробное изучение вспомогательных методов асинхронных генераторов

1. `map()`

Метод map() преобразует каждое значение в асинхронной последовательности, применяя предоставленную функцию. Он возвращает новый асинхронный генератор, который выдает преобразованные значения.

Синтаксис:

asyncGenerator.map(callback)

Пример: Преобразование потока чисел в их квадраты.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simulate async operation
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Пример из реальной жизни: Представьте, что вы получаете данные пользователей из нескольких API и вам нужно преобразовать их в единый формат. map() можно использовать для асинхронного применения функции преобразования к каждому объекту пользователя.

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normalize user data format
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

Метод filter() создает новый асинхронный генератор, который выдает только те значения из исходной последовательности, которые удовлетворяют заданному условию. Он позволяет выборочно включать значения в результирующий поток.

Синтаксис:

asyncGenerator.filter(callback)

Пример: Фильтрация потока чисел для включения только четных чисел.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Пример из реальной жизни: Обработка потока записей журнала и фильтрация записей по уровню их важности. Например, обработка только ошибок и предупреждений.

async function* readLogFile(filePath) {
  // Simulate reading a log file line by line asynchronously
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

Метод take() создает новый асинхронный генератор, который выдает только первые n значений из исходной последовательности. Это полезно для ограничения количества обрабатываемых элементов из потенциально бесконечного или очень большого потока.

Синтаксис:

asyncGenerator.take(n)

Пример: Взятие первых 3 чисел из потока чисел.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Пример из реальной жизни: Отображение топ-5 результатов поиска из асинхронного поискового API.

async function* search(query) {
  // Simulate fetching search results from an API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

Метод drop() создает новый асинхронный генератор, который пропускает первые n значений из исходной последовательности и выдает остальные. Это противоположность take(), полезная для игнорирования начальных частей потока.

Синтаксис:

asyncGenerator.drop(n)

Пример: Пропуск первых 2 чисел из потока чисел.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Пример из реальной жизни: Постраничная навигация по большому набору данных, полученному из API, с пропуском уже отображенных результатов.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simulate fetching data with offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // skip items from previous pages

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Example usage
displayPage(2);

5. `flatMap()`

Метод flatMap() преобразует каждое значение в асинхронной последовательности, применяя функцию, которая возвращает асинхронный итерируемый объект (Async Iterable). Затем он "выравнивает" результирующие асинхронные итерируемые объекты в один асинхронный генератор. Это полезно для преобразования каждого значения в поток значений и последующего объединения этих потоков.

Синтаксис:

asyncGenerator.flatMap(callback)

Пример: Преобразование потока предложений в поток слов.

async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Пример из реальной жизни: Получение комментариев для нескольких постов в блоге и их объединение в один поток для обработки.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simulate fetching blog post IDs from an API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simulate fetching comments for a blog post from an API
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

Метод reduce() применяет функцию к аккумулятору и каждому значению асинхронного генератора (слева направо), чтобы свести его к одному значению. Это полезно для агрегирования данных из асинхронного потока.

Синтаксис:

asyncGenerator.reduce(callback, initialValue)

Пример: Вычисление суммы чисел в потоке.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Пример из реальной жизни: Вычисление среднего времени ответа серии вызовов API.

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Error fetching ${endpoint}: ${error}`);
      yield 0; // Or handle the error appropriately
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Average response time: ${average} ms`);
}

7. `toArray()`

Метод toArray() потребляет асинхронный генератор и возвращает промис, который разрешается в массив, содержащий все значения, выданные генератором. Это полезно, когда вам нужно собрать все значения из потока в один массив для дальнейшей обработки.

Синтаксис:

asyncGenerator.toArray()

Пример: Сбор чисел из потока в массив.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Number Array:', numberArray);
}

processNumbers();

Пример из реальной жизни: Сбор всех элементов из постраничного API в один массив для фильтрации или сортировки на стороне клиента.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Adjust based on the API's pagination limits

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // No more data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Fetched ${itemsArray.length} items.`);
    // Further processing can be performed on the `itemsArray`
}

8. `forEach()`

Метод forEach() выполняет предоставленную функцию один раз для каждого значения в асинхронном генераторе. В отличие от других методов, forEach() не возвращает новый асинхронный генератор; он используется для выполнения побочных эффектов для каждого значения.

Синтаксис:

asyncGenerator.forEach(callback)

Пример: Вывод каждого числа из потока в консоль.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Number:', num);
  });
}

processNumbers();

Пример из реальной жизни: Отправка обновлений в реальном времени в пользовательский интерфейс по мере обработки данных из потока.

async function* fetchRealTimeData(dataSource) {
    //Simulate fetching real-time data (e.g. stock prices).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Simulate updating the UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Code to actually update UI would go here.
  });
}

Комбинирование вспомогательных методов асинхронных генераторов для сложных конвейеров данных

Настоящая сила вспомогательных методов асинхронных генераторов заключается в их способности объединяться в цепочки для создания сложных конвейеров данных. Это позволяет выполнять несколько преобразований и операций над асинхронным потоком в краткой и читаемой форме.

Пример: Фильтрация потока чисел для включения только четных, затем возведение их в квадрат и, наконец, взятие первых 3 результатов.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Пример из реальной жизни: Получение данных пользователей, фильтрация пользователей по их местоположению, преобразование их данных для включения только релевантных полей, а затем отображение первых 10 пользователей на карте.

async function* fetchUsers() {
  // Simulate fetching users from a database or API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Usage examples:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Полифиллы и поддержка браузерами

Поддержка вспомогательных методов асинхронных генераторов может варьироваться в зависимости от среды JavaScript. Если вам нужно поддерживать старые браузеры или среды, вам может понадобиться использовать полифиллы. Полифилл предоставляет недостающую функциональность, реализуя ее на JavaScript. Существует несколько библиотек полифиллов для вспомогательных методов асинхронных генераторов, например core-js.

Пример использования core-js:

// Import the necessary polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... import other needed helpers

Обработка ошибок

При работе с асинхронными операциями крайне важно правильно обрабатывать ошибки. Со вспомогательными методами асинхронных генераторов обработка ошибок может быть выполнена с помощью блоков try...catch внутри асинхронных функций, используемых в этих методах.

Пример: Обработка ошибок при получении данных в операции map().

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}: ${error}`);
      yield null; // Or handle the error appropriately, e.g., by yielding an error object
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Propagate the error
    }
    // Process the data
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

Лучшие практики и рекомендации

• Ленивые вычисления: Вспомогательные методы асинхронных генераторов вычисляются лениво, то есть они обрабатывают данные только по запросу. Это может повысить производительность, особенно при работе с большими наборами данных.
• Обработка ошибок: Всегда правильно обрабатывайте ошибки внутри асинхронных функций, используемых в вспомогательных методах.
• Полифиллы: Используйте полифиллы при необходимости для поддержки старых браузеров или сред.
• Читаемость: Используйте описательные имена переменных и комментарии, чтобы сделать ваш код более читаемым и поддерживаемым.
• Производительность: Помните о последствиях для производительности при объединении нескольких методов в цепочку. Хотя ленивость помогает, чрезмерное количество цепочек все же может привести к дополнительным накладным расходам.

Заключение

Вспомогательные методы асинхронных генераторов JavaScript предоставляют мощный и элегантный способ создания, преобразования и управления потоками асинхронных данных. Используя эти методы, разработчики могут писать более краткий, читаемый и поддерживаемый код для обработки сложных асинхронных операций. Понимание основ асинхронных генераторов и итераторов, а также функциональности каждого вспомогательного метода, необходимо для эффективного использования этих инструментов в реальных приложениях. Независимо от того, создаете ли вы конвейеры данных, обрабатываете данные в реальном времени или работаете с асинхронными ответами API, вспомогательные методы асинхронных генераторов могут значительно упростить ваш код и повысить его общую эффективность.